<template>
  <div class="regist">
    <v-header :back-display="true">
      <div slot="title">注 册</div>
    </v-header>

    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        required
        clearable
        maxlength="8"
        placeholder="请输入用户名"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="password_a"
        type="password"
        name="password_a"
        label="密码"
        required
        clearable
        autocomplete="off"
        maxlength="6"
        placeholder="6位数字和字母组合"
        :rules="[{ pattern, required: true }]"
      />
      <van-field
        v-model="password_b"
        type="password"
        name="password_b"
        label="确认密码"
        required
        clearable
        autocomplete="off"
        maxlength="6"
        placeholder="请再次输入密码"
        :rules="[{ pattern, required: true }]"
      />
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        clearable
        maxlength="20"
        placeholder="请输入邮箱"
        required
        :rules="[{ pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/, required: true }]"
      />
      <van-field
        v-model="phone"
        name="phone"
        label="手机号码"
        maxlength="11"
        clearable
        required
        placeholder="请输入手机号码"
        :rules="[{ pattern: /^1[3456789]\d{9}$/ }]"
      />
      <van-field
        v-model="code"
        name="code"
        center
        required
        clearable
        label="验证码"
        maxlength="4"
        placeholder="请输入验证码"
        :rules="[{ required: true }]"
      >
        <template #button>
          <van-button size="small" :disabled="isban" class="yzm-btn" @click="sendCode" native-type="button" type="primary">{{tip}}</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注 册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import header from '@/components/main/header'
import { Form, Field,Button, Toast } from 'vant'

export default {
  name: 'regist',
  components: {
    "v-header":header,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  data () {
    return {
      username:'',   //用户名
      password_a:'', // 密码
      password_b:'', // 确认密码
      pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/,  // 密码正则
      email:'',  //邮箱
      phone:'',   //手机号码
      code:'',   //验证码
      timer: null, // 倒计时
      tip: '发送验证码',
      registdata:{},  // 提交表单的对象
      isban:false  // 验证码按钮是否禁止点击
    }
  },
  created () {
  },
  computed: {},
  methods: {
    // 提交表单
    onSubmit(values) {
      if( this.password_a !== this.password_b ){
        Toast("两次填写的密码不一致")
      }else{
        this.registdata=values
        console.log('提交注册表单', this.registdata);
        Toast.success('注册成功');
        setTimeout(()=>{
          this.$router.push({path:'/user/login'})
        },2000)
      }
    },

    // 获取验证码
    sendCode(){
      let time = 10;
      this.tip=time + ' s后重试'
      this.timer = setInterval( ()=>{
        if( time === 1){
          this.tip = '发送验证码'
          clearInterval(this.timer)
          this.timer = null
          this.isban = false
        }else{
          this.isban = true
          time --
          this.tip = time + ' s'
        }
      },1000)
    }

  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.logo{
  width: 120px;
  margin: 20px auto 30px;
  img{
    display: block;
    width: 100%;
  }
}
.van-form{ width: 80%; margin: 0 auto;}
/deep/.van-field__label {width: 80px;}
.van-button--info { background-color: #ff8333; border-color: #ff8333; font-size: 16px;}
.van-button--primary {background-color: #ff8333;border-color: #ff8333;}
.yzm-btn{padding: 0;width: 76px;}
</style>
